<template>
  <div>
    <head1 :item="3"></head1>
    <br /><br /><br />
    <div class="container">
      <div class="list-group" v-for="comment in comments"  :key="comment.id" >
        <div class="list-group-item" v-on:click="selectitem(comment.id)">
          <h4 class="list-group-item-heading">文章标题：{{ comment.title }}</h4>
        </div>
        <div
          class="list-group-item"
          v-for="(item, index) in comment.commentList"  :key="item.id"
        >
          <p class="list-group-item-heading">
            {{ item.author }}
            <a
              v-on:click="Delete(index, comment.commentList)"
              class="pull-right"
              href="javascript:;"
              >删除</a
            >
          </p>
          <p class="list-group-item-text">
            {{ item.content }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/Head";

export default {
  name: "CommentEdit",
  data() {
    return {
      comments: "",
    };
  },
  methods: {
    selectitem(id) {
      this.$router.push({
        path: "detail",
        query: { id: id },
      });
    },
    Delete(index, arr) {
      //数据库操作
      this.$axios
        .delete("comment/" + arr[index].id)
        .then((response) => {
          console.log(response.data);
          arr.splice(index, 1); //从下标i开始删除1个元素：删除下标为i的元素
        })
        .catch((error) => console.log(error)); // 请求失败处理
    },
  },
  mounted() {
    //发送get请求
    this.$axios
      .get("comments")
      .then((response) => {
        //console.log(response.data)
        this.comments = response.data.data;
      })
      .catch((error) => console.log(error)); // 请求失败处理
  },
  components: {
    Head: Head,
  },
};
</script>

